<template>
    <div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><span style="color: red;">* </span>食谱名称</td>
                    <td>
                        <input type="text" v-model="book.fname">
                    </td>
                </tr>
                <tr>
                    <td><span style="color: red;">* </span>食谱封面</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="book.fimg" v-if="book.fimg!=''" style="width: 100px;height: 100px;">
                    </td>
                </tr>
                <tr>
                    <td><span style="color: red;">* </span>标签</td>
                    <td>
                        <input type="radio" v-model="book.fbiao" :value="true">低盐
                        <input type="radio" v-model="book.fbiao" :value="false">低糖
                    </td>
                </tr>
                <tr>
                    <td><span style="color: red;">* </span>分类</td>
                    <td>
                        <select v-model="book.tid">
                            <option value="0">请选择</option>
                            <option v-for="value in type" :value="value.tid">{{ value.tname }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><span style="color: red;">* </span>食谱描述</td>
                    <td>
                        <textarea v-model="book.fdesc" cols="50" rows="5"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>食谱状态</td>
                    <td>
                        <input type="radio" v-model="book.fstate" :value="true">已发布
                        <input type="radio" v-model="book.fstate" :value="false">未发布
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="添加" @click="add">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
    onMounted(()=>
    {
        tid();
    })
    import { useRouter } from 'vue-router';
    import axios from 'axios';
    import { onMounted, ref } from 'vue';
    let router =useRouter();
    let book = ref
    ({
        "fid": 0,
        "fname": "",
        "fimg": "",
        "fbiao": true,
        "tid": 0,
        "fdesc": "",
        "fstate": true,
    })
    let type: any=ref([{}]);
    const img = (i: any) =>
    {
        console.log(i);
        let pic = i.target.files[0];
        let photo = new FormData();
        photo.append('file',pic);
        axios
        ({
            url:"https://localhost:7080/api/Upload/Upload",
            method:"post",
            data:photo
        })
        .then((res)=>
        {
            console.log(res);
            book.value.fimg=res.data;
        })
        .catch((err) => 
        {
            console.log(err);
        })
    }
    const add = () =>
    {
        if (book.value.fname == "")
        {
            alert('食谱名称不能为空');
            return;
        }
        if (book.value.fimg == "") 
        {
            alert('食谱封面不能为空');
            return;
        }
        if (book.value.fbiao === null) 
        {
            alert('食谱标签不能为空');
            return;
        }
        if (book.value.tid == 0) 
        {
            alert('食谱分类不能为空');
            return;
        }
        if (book.value.fdesc == "") 
        {
            alert('食谱描述不能为空');
            return;
        }
        axios
        ({
            url:"https://localhost:7080/api/FoodBook/AddBook",
            method:"post",
            data:book.value
        })
        .then((res)=>
        {
            console.log(res);
            if(res.data>0)
            {
                alert("食谱信息添加成功")
                router.push('/allbook')
            }
            else
            {
                alert('食谱信息添加失败')
            }
        })
        .catch((err) => 
        {
            console.log(err);
        })
    }
    const tid = () =>
    {
        axios
        ({
            url:"https://localhost:7080/api/FoodBookType/GetAllType",
            method:"get"
        })
        .then((res)=>
        {
            console.log(res);
            type.value=res.data;
        })
        .catch((err)=>
        {
            console.log(err);
        })
    }
</script>

<style lang="scss" scoped>

</style>